<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>销售统计 - 新疆奎木星测控技术有限公司</title>
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/element-plus/dist/index.full.js"></script>
    <style>
        body {
            margin: 0;
            font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
            background-color: #f5f7fa;
        }
        .header {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            color: white;
            padding: 20px;
            text-align: center;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        }
        .container {
            max-width: 1400px;
            margin: 20px auto;
            padding: 0 20px;
        }
        .search-card {
            background: white;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        }
        .data-card {
            background: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        }
        .search-form .el-form-item {
            margin-bottom: 18px;
        }
        .statistics-summary {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-bottom: 20px;
        }
        .stat-item {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            color: white;
            padding: 20px;
            border-radius: 8px;
            text-align: center;
        }
        .stat-value {
            font-size: 28px;
            font-weight: bold;
            margin-bottom: 5px;
        }
        .stat-label {
            font-size: 14px;
            opacity: 0.9;
        }
        .chart-container {
            margin: 20px 0;
            padding: 20px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="header">
            <h1>销售统计管理</h1>
            <p>粮食销售数据统计分析平台</p>
        </div>
        
        <div class="container">
            <!-- 搜索筛选区域 -->
            <div class="search-card">
                <h3>数据筛选条件</h3>
                <el-form :model="searchForm" class="search-form" :inline="true">
                    <el-form-item label="销售时间">
                        <el-date-picker
                            v-model="searchForm.dateRange"
                            type="datetimerange"
                            range-separator="至"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间"
                            format="YYYY-MM-DD HH:mm:ss"
                            value-format="YYYY-MM-DD HH:mm:ss"
                        >
                        </el-date-picker>
                    </el-form-item>
                    
                    <el-form-item label="年份">
                        <el-select v-model="searchForm.year" placeholder="选择年份" clearable>
                            <el-option v-for="year in yearOptions" :key="year" :label="year" :value="year"></el-option>
                        </el-select>
                    </el-form-item>
                    
                    <el-form-item label="销售方">
                        <el-select v-model="searchForm.sellerId" placeholder="选择销售方" clearable>
                            <el-option v-for="seller in sellerOptions" :key="seller.id" :label="seller.name" :value="seller.id"></el-option>
                        </el-select>
                    </el-form-item>
                    
                    <el-form-item label="购买方">
                        <el-select v-model="searchForm.buyerId" placeholder="选择购买方" clearable>
                            <el-option v-for="buyer in buyerOptions" :key="buyer.id" :label="buyer.name" :value="buyer.id"></el-option>
                        </el-select>
                    </el-form-item>
                    
                    <el-form-item label="产品类型">
                        <el-select v-model="searchForm.productType" placeholder="选择产品类型" clearable>
                            <el-option v-for="type in productTypeOptions" :key="type" :label="type" :value="type"></el-option>
                        </el-select>
                    </el-form-item>
                    
                    <el-form-item label="产品规格">
                        <el-select v-model="searchForm.specification" placeholder="选择产品规格" clearable>
                            <el-option v-for="spec in specificationOptions" :key="spec" :label="spec" :value="spec"></el-option>
                        </el-select>
                    </el-form-item>
                    
                    <el-form-item label="销售价格">
                        <el-input-number v-model="searchForm.priceMin" placeholder="最低价格" :min="0" :precision="2"></el-input-number>
                        <span style="margin: 0 10px;">-</span>
                        <el-input-number v-model="searchForm.priceMax" placeholder="最高价格" :min="0" :precision="2"></el-input-number>
                    </el-form-item>
                    
                    <el-form-item label="销售金额">
                        <el-input-number v-model="searchForm.amountMin" placeholder="最低金额" :min="0" :precision="2"></el-input-number>
                        <span style="margin: 0 10px;">-</span>
                        <el-input-number v-model="searchForm.amountMax" placeholder="最高金额" :min="0" :precision="2"></el-input-number>
                    </el-form-item>
                    
                    <el-form-item label="销售状态">
                        <el-select v-model="searchForm.status" placeholder="选择销售状态" clearable>
                            <el-option label="已完成" value="completed"></el-option>
                            <el-option label="进行中" value="processing"></el-option>
                            <el-option label="已取消" value="cancelled"></el-option>
                        </el-select>
                    </el-form-item>
                    
                    <el-form-item label="销售区域">
                        <el-select v-model="searchForm.region" placeholder="选择销售区域" clearable>
                            <el-option v-for="region in regionOptions" :key="region" :label="region" :value="region"></el-option>
                        </el-select>
                    </el-form-item>
                    
                    <el-form-item>
                        <el-button type="primary" @click="searchData">查询统计</el-button>
                        <el-button @click="resetSearch">重置条件</el-button>
                        <el-button type="success" @click="exportData">导出数据</el-button>
                    </el-form-item>
                </el-form>
            </div>
            
            <!-- 统计汇总区域 -->
            <div class="statistics-summary">
                <div class="stat-item">
                    <div class="stat-value">{{ statisticsData.totalOrders }}</div>
                    <div class="stat-label">总销售订单数</div>
                </div>
                <div class="stat-item">
                    <div class="stat-value">{{ statisticsData.totalRevenue.toFixed(2) }}</div>
                    <div class="stat-label">总销售收入（万元）</div>
                </div>
                <div class="stat-item">
                    <div class="stat-value">{{ statisticsData.totalQuantity.toFixed(2) }}</div>
                    <div class="stat-label">总销售数量（吨）</div>
                </div>
                <div class="stat-item">
                    <div class="stat-value">{{ statisticsData.avgPrice.toFixed(2) }}</div>
                    <div class="stat-label">平均销售价格（元/吨）</div>
                </div>
                <div class="stat-item">
                    <div class="stat-value">{{ statisticsData.customerCount }}</div>
                    <div class="stat-label">客户数量</div>
                </div>
                <div class="stat-item">
                    <div class="stat-value">{{ statisticsData.productCount }}</div>
                    <div class="stat-label">产品种类数</div>
                </div>
            </div>
            
            <!-- 数据表格区域 -->
            <div class="data-card">
                <h3>销售数据明细</h3>
                <el-table :data="salesData" style="width: 100%" v-loading="loading">
                    <el-table-column prop="order_no" label="订单号" width="150"></el-table-column>
                    <el-table-column prop="seller_name" label="销售方" width="120"></el-table-column>
                    <el-table-column prop="buyer_name" label="购买方" width="120"></el-table-column>
                    <el-table-column prop="product_type" label="产品类型" width="100"></el-table-column>
                    <el-table-column prop="specification" label="产品规格" width="100"></el-table-column>
                    <el-table-column prop="quantity" label="销售数量(吨)" width="120">
                        <template #default="scope">
                            <span>{{ scope.row.quantity.toFixed(2) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="unit_price" label="单价(元/吨)" width="120">
                        <template #default="scope">
                            <span>{{ scope.row.unit_price.toFixed(2) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="total_amount" label="总金额(元)" width="120">
                        <template #default="scope">
                            <span>{{ scope.row.total_amount.toFixed(2) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="sale_date" label="销售日期" width="150"></el-table-column>
                    <el-table-column prop="delivery_date" label="交货日期" width="150"></el-table-column>
                    <el-table-column prop="status" label="状态" width="100">
                        <template #default="scope">
                            <el-tag :type="getStatusType(scope.row.status)">
                                {{ getStatusText(scope.row.status) }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="region" label="销售区域" width="100"></el-table-column>
                    <el-table-column prop="contact_person" label="联系人" width="100"></el-table-column>
                    <el-table-column prop="remarks" label="备注" min-width="150"></el-table-column>
                </el-table>
                
                <!-- 分页组件 -->
                <el-pagination
                    v-model:current-page="pagination.currentPage"
                    v-model:page-size="pagination.pageSize"
                    :page-sizes="[10, 20, 50, 100]"
                    :total="pagination.total"
                    layout="total, sizes, prev, pager, next, jumper"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    style="margin-top: 20px; text-align: right;"
                >
                </el-pagination>
            </div>
        </div>
    </div>

    <script>
        const { createApp } = Vue;
        const { ElMessage, ElMessageBox } = ElementPlus;
        
        createApp({
            data() {
                return {
                    loading: false,
                    // 搜索表单数据
                    searchForm: {
                        dateRange: [],
                        year: '',
                        sellerId: '',
                        buyerId: '',
                        productType: '',
                        specification: '',
                        priceMin: null,
                        priceMax: null,
                        amountMin: null,
                        amountMax: null,
                        status: '',
                        region: ''
                    },
                    // 下拉选项数据
                    yearOptions: [2024, 2023, 2022, 2021, 2020],
                    sellerOptions: [
                        { id: 1, name: '新疆天山面粉厂' },
                        { id: 2, name: '乌鲁木齐粮油加工厂' },
                        { id: 3, name: '昌吉州粮食加工厂' },
                        { id: 4, name: '伊犁河谷面粉厂' }
                    ],
                    buyerOptions: [
                        { id: 1, name: '北京粮食批发市场' },
                        { id: 2, name: '上海粮油贸易公司' },
                        { id: 3, name: '广州食品集团' },
                        { id: 4, name: '深圳粮食储备中心' }
                    ],
                    productTypeOptions: ['面粉', '玉米粉', '豆粉', '米粉', '混合粉'],
                    specificationOptions: ['特级', '一级', '二级', '标准级', '饲料级'],
                    regionOptions: ['华北地区', '华东地区', '华南地区', '西北地区', '西南地区', '东北地区'],
                    // 统计汇总数据
                    statisticsData: {
                        totalOrders: 856,
                        totalRevenue: 4567.89,
                        totalQuantity: 23456.78,
                        avgPrice: 1950.00,
                        customerCount: 156,
                        productCount: 25
                    },
                    // 销售数据列表
                    salesData: [
                        {
                            id: 1,
                            order_no: 'XS202401001',
                            seller_name: '新疆天山面粉厂',
                            buyer_name: '北京粮食批发市场',
                            product_type: '面粉',
                            specification: '特级',
                            quantity: 50.00,
                            unit_price: 2000.00,
                            total_amount: 100000.00,
                            sale_date: '2024-01-15',
                            delivery_date: '2024-01-20',
                            status: 'completed',
                            region: '华北地区',
                            contact_person: '张经理',
                            remarks: '优质面粉，按时交货'
                        },
                        {
                            id: 2,
                            order_no: 'XS202401002',
                            seller_name: '乌鲁木齐粮油加工厂',
                            buyer_name: '上海粮油贸易公司',
                            product_type: '玉米粉',
                            specification: '一级',
                            quantity: 80.00,
                            unit_price: 1800.00,
                            total_amount: 144000.00,
                            sale_date: '2024-01-16',
                            delivery_date: '2024-01-22',
                            status: 'processing',
                            region: '华东地区',
                            contact_person: '李总监',
                            remarks: '运输中，预计按时到达'
                        },
                        {
                            id: 3,
                            order_no: 'XS202401003',
                            seller_name: '昌吉州粮食加工厂',
                            buyer_name: '广州食品集团',
                            product_type: '豆粉',
                            specification: '特级',
                            quantity: 30.00,
                            unit_price: 2200.00,
                            total_amount: 66000.00,
                            sale_date: '2024-01-17',
                            delivery_date: '2024-01-25',
                            status: 'completed',
                            region: '华南地区',
                            contact_person: '王主任',
                            remarks: '有机豆粉，质量优良'
                        }
                    ],
                    // 分页数据
                    pagination: {
                        currentPage: 1,
                        pageSize: 20,
                        total: 856
                    }
                };
            },
            
            methods: {
                /**
                 * 搜索数据 - 根据筛选条件查询销售统计数据
                 */
                searchData() {
                    this.loading = true;
                    
                    // 模拟API调用
                    setTimeout(() => {
                        ElMessage.success('数据查询完成');
                        this.loading = false;
                        // 这里应该调用真实的API接口
                        // this.fetchSalesData();
                    }, 1000);
                },
                
                /**
                 * 重置搜索条件
                 */
                resetSearch() {
                    this.searchForm = {
                        dateRange: [],
                        year: '',
                        sellerId: '',
                        buyerId: '',
                        productType: '',
                        specification: '',
                        priceMin: null,
                        priceMax: null,
                        amountMin: null,
                        amountMax: null,
                        status: '',
                        region: ''
                    };
                    ElMessage.info('搜索条件已重置');
                },
                
                /**
                 * 导出数据
                 */
                exportData() {
                    ElMessage.success('数据导出功能开发中...');
                },
                
                /**
                 * 获取状态类型
                 */
                getStatusType(status) {
                    const statusMap = {
                        'completed': 'success',
                        'processing': 'warning',
                        'cancelled': 'danger'
                    };
                    return statusMap[status] || 'info';
                },
                
                /**
                 * 获取状态文本
                 */
                getStatusText(status) {
                    const statusMap = {
                        'completed': '已完成',
                        'processing': '进行中',
                        'cancelled': '已取消'
                    };
                    return statusMap[status] || '未知';
                },
                
                /**
                 * 处理每页显示数量变化
                 */
                handleSizeChange(val) {
                    this.pagination.pageSize = val;
                    this.pagination.currentPage = 1;
                    this.searchData();
                },
                
                /**
                 * 处理当前页码变化
                 */
                handleCurrentChange(val) {
                    this.pagination.currentPage = val;
                    this.searchData();
                }
            },
            
            mounted() {
                // 页面加载完成后自动查询一次数据
                this.searchData();
            }
        }).use(ElementPlus).mount('#app');
    </script>
</body>
</html>